<template lang="">
    <div>
        <div class="chart-group">
            <!-- <div class="chart-item">
                <BarCharts :item="item"></BarCharts>
            </div>
            <div class="chart-item">
                <PieCharts :item="item"></PieCharts>
            </div> -->
            <div>
                <el-button-group>
                    <el-button type="primary" size="mini" @click="changeChart(0)" :plain="chartType!=0">饼图</el-button>
                    <el-button type="primary" size="mini" @click="changeChart(1)" :plain="chartType!=1">圆环</el-button>
                    <el-button type="primary" size="mini" @click="changeChart(2)" :plain="chartType!=2">柱状</el-button>
                </el-button-group>
            </div>
            <div>
                <AnalysesTable :item="item"></AnalysesTable>
            </div>
            <div class="chart-item">
                <component :is='handleCharts()' :item="item"></component>
            </div>
        </div>
    </div>
</template>
<script>
    import PieCharts from './PieCharts.vue';
    import BarCharts from './BarCharts.vue';
    import RingCharts from './RingCharts.vue';
    import AnalysesTable from './AnalysesTable.vue';
    export default {
        name: 'ChartGroup',
        components: {
            PieCharts,
            BarCharts,
            RingCharts,
            AnalysesTable
        },
        props: ['item'],
        computed: {
            allShowing() {
                if (this.showBar && this.showPie) {
                    return 'allShowing'
                } else {
                    return 'oneShowing'
                }
            }
        },
        data() {
            return {
                chartType:0
            }
        },
        methods: {
            handleCharts() {
                if(this.chartType == 0){
                    return PieCharts
                }else if(this.chartType == 1){
                    return RingCharts
                }else if(this.chartType == 2){
                    return BarCharts
                }
                /* if (this.item.queType == 0 || this.item.queType == 4) {
                    return PieCharts
                } else if (this.item.queType == 1) {
                    return BarCharts
                } */
            },
            changeChart(aimChart){
                this.chartType = aimChart
            }
        },
    }
</script>
<style scoped>
    .button-group-emit {
        width: 230px;
    }

    .chart-group {
        display: flex;
        flex-direction: column;
    }

    .chart-item {
        height: 350px;
        width: 100%;
    }

    .el-button-group{
        float: right;
        margin-right: 15%;
    }
</style>